<template>
  <div class="page has-navbar" v-nav="{ title: '编辑地址', showBackButton: true, onBackButtonClick: back,showMenuButton: true,onMenuButtonClick: menu }">
    <div class="page-content text-center">
      <div class="container">
          <form action="#" method="post" id="form">
            <div class="name">
              <div class="top">
                <span>姓名</span>
                <input type="text" id="name" placeholder="姓名" v-model="addressMsg === null || undefined ? '': addressMsg.name">
              </div>
              <div class="bottom">
                <span :class="(addressMsg !== null || undefined) && (addressMsg.sex === '先生') ? 'active' : ''">先生</span>
                <span :class="(addressMsg !== null || undefined) && (addressMsg.sex === '女士') ? 'active' : ''">女士</span>
              </div>
            </div>
            <div class="phone">
              <span>电话</span>
              <input type="text" id="phone" placeholder="手机号码" v-model="addressMsg === null || undefined ? '': addressMsg.phone">
            </div>
            <div class="address">
              <span>电话</span>
              <input type="text" id="address" placeholder="选择收货地址" v-model="addressMsg === null || undefined ? '': addressMsg.address">
            </div>
            <div class="doorNumber">
              <span>门牌号</span>
              <input type="text" id="doorNumber" placeholder="例：8号宿舍701室" v-model="addressMsg === null || undefined ? '': addressMsg.floorNumber">
            </div>
          </form>
        <input type="submit" form="form" value="确 定" id="submit">
      </div>
    </div>
  </div>
</template>

<script>
    export default {
      name: "EditAddress",
      data(){
        return{
          addressId : '',
          addressMsg : {
            name : '',
            sex : '',
            address : '',
            phone : '',
            floorNumber : ''
          }
        }
      },
      methods:{
        back(){
          this.$router.go(-1)
        },
        menu(){
          console.log(this.addressMsg);
        }
      },
      created(){
        this.addressMsg = this.$route.query.sendAMsg || this.addressMsg;
        console.log(this.addressMsg === null || undefined);
      }
    }
</script>

<style scoped lang="less">
#form{
  padding: 15px;
  text-align: start;
  background: #ffffff;
  .name{
    position: relative;
    border-bottom: 1px solid #ccc;
    padding-bottom: 20px;
    .top{
      display: flex;
      justify-content: space-between;
      line-height: 60px;
      margin-bottom: 50px;
      #name{
        border-bottom: 1px solid #ccc;
      }
      label{
        width: 30%;
      }
      input{
        width: 70%;
        line-height: 60px;
        min-height: 61px;
      }
    }
    .bottom{
      margin: 15px 0;
      position: absolute;
      width: 70%;
      right: 0;
      top: 70px;
      span{
        border: 1px solid #ef2b67;
        padding: 5px 30px;
        color: #ef2b67;
        width: calc(50% - 2px);
        display: inline-block;
        text-align: center;
      }
      span.active{
        color: #ffffff;
        background: #ef2b67;
      }
    }
  }
  .phone,.address,.doorNumber{
    display: flex;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    >span{
      width: 30%;
      line-height: 60px;
      border-bottom: 1px solid #ccc;
    }
    input{
      width: 70%;
      border-bottom: 1px solid #ccc;
      line-height: 60px;
      min-height: 61px;
    }
  }
}
input[type='submit']{
  background: #ef2b67;
  color: #ffffff;
  line-height: 60px;
  width: calc(100% - 30px);
  margin: 15px;
  outline: none;
  border: none;
  font-size: 18px;
}
</style>
